import React, { useState } from "react";
import { Button, Form, Input, Select, DatePicker, message } from "antd";
import '../components.css'
import RepaymentScheduleService from "../../services/RepaymentScheduleService";
import { Link, useNavigate } from "react-router-dom";
import dayjs from 'dayjs';

const { Option } = Select;

export default function AddRepaymentSchedule() {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    
    // 还款状态选项
    const statusOptions = [
        { value: 'PENDING', label: '未到期' },
        { value: 'PAID', label: '已支付' },
        { value: 'OVERDUE', label: '已逾期' }
    ];
    
    // 表单提交处理
    const onFinish = async (values) => {
        try {
            // 转换日期格式
            const formattedValues = {
                ...values,
                dueDate: values.dueDate.format('YYYY-MM-DD'),
                period: parseInt(values.period),
                totalPeriods: parseInt(values.totalPeriods),
                principal: parseFloat(values.principal)
            };
            
            // 调用服务创建还款计划
            await RepaymentScheduleService.createRepaymentSchedule(formattedValues);
            
            message.success('还款计划添加成功!');
            navigate('/repaymentschedulelist'); // 跳转到还款计划列表
        } catch (error) {
            console.error('添加还款计划失败:', error);
            message.error('添加还款计划失败，请重试');
        }
    };

    const onFinishFailed = (errorInfo) => {
        console.log('表单验证失败:', errorInfo);
    };

    return (
        <div className='addrepaymentschedule'>
            <div className="title" style={{ paddingBottom: '30px' }}>添加还款计划</div>
            
            <Form
                form={form}
                name="addRepayment"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 15 }}
                style={{ marginLeft: '2%' }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                {/* 合同编号 */}
                <Form.Item
                    label="合同编号"
                    name="contractNumber"
                    rules={[{ required: true, message: '请输入合同编号!' }]}
                >
                    <Input placeholder="请输入合同编号" />
                </Form.Item>
                
                {/* 客户名称 */}
                <Form.Item
                    label="客户名称"
                    name="customerName"
                    rules={[{ required: true, message: '请输入客户名称!' }]}
                >
                    <Input placeholder="请输入客户名称" />
                </Form.Item>
                
                {/* 当前期数 */}
                <Form.Item
                    label="当前期数"
                    name="period"
                    rules={[{ required: true, message: '请输入当前期数!' }]}
                >
                    <Input type="number" min={1} placeholder="请输入当前期数" />
                </Form.Item>
                
                {/* 总期数 */}
                <Form.Item
                    label="总期数"
                    name="totalPeriods"
                    rules={[{ required: true, message: '请输入总期数!' }]}
                >
                    <Input type="number" min={1} placeholder="请输入总期数" />
                </Form.Item>
                
                {/* 本金 */}
                <Form.Item
                    label="本金"
                    name="principal"
                    rules={[{ 
                        required: true,
                        pattern: /^\d+(\.\d{1,2})?$/,
                        message: '请输入有效的本金金额 (如: 1000 或 1000.00)' 
                    }]}
                >
                    <Input prefix="¥" placeholder="请输入本金金额" />
                </Form.Item>
                
                {/* 到期日 */}
                <Form.Item
                    label="到期日"
                    name="dueDate"
                    rules={[{ required: true, message: '请选择到期日!' }]}
                >
                    <DatePicker 
                        format="YYYY-MM-DD" 
                        style={{ width: '100%' }} 
                        disabledDate={(current) => current && current < dayjs().startOf('day')}
                    />
                </Form.Item>
                
                {/* 状态 */}
                <Form.Item
                    label="状态"
                    name="status"
                    rules={[{ required: true, message: '请选择还款状态!' }]}
                >
                    <Select placeholder="请选择还款状态">
                        {statusOptions.map(option => (
                            <Option key={option.value} value={option.value}>
                                {option.label}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>
                
                {/* 操作按钮 */}
                <Form.Item
                    wrapperCol={{
                        offset: 5,
                        span: 16,
                    }}
                    style={{ marginTop: '50px' }}
                >
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    <Button 
                        type="danger" 
                        style={{ marginLeft: "25px" }}
                        onClick={() => navigate('/repaymentschedulelist')}
                    >
                        取消
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}